<template>
    <view class="storecheck">
        <view class="uv-index-list">
            <uv-index-list :index-list="indexList" activeColor="#FD754C" :customNavHeight="customNavHeight">
                <template v-for="(item, index) in groupcolumns" :key="index">
                    <uv-index-item>
                        <uv-index-anchor :text="index"></uv-index-anchor>
                        <view class="list-cell" v-for="(cell, i) in item"
                            :class="value.includes(String(cell.poiId)) ? 'active' : ''" :key="cell.id"
                            @click="click(cell.poiId)">
                            <view class="viewicon">
                                <uv-icon v-if="value.includes(String(cell.poiId))" name="checkmark" color="#FD754C"
                                    size="14"></uv-icon>
                            </view>
                            <view class="text">
                                {{ cell.poiName }}
                            </view>
                        </view>
                    </uv-index-item>
                </template>
                <template v-slot:footer>
                    <view class="uv-index-list-footer"></view>
                </template>
            </uv-index-list>
        </view>
        <view class="select-item">
            <view class="select-item-view ">
                <view @click="popup.open">
                    已选择：{{ value.length }}
                </view>
                <view>
                    <uv-icon name="arrow-up" size="20"></uv-icon>
                </view>
            </view>
            <view class="select-item-button">
                <uv-button :custom-style="defaultButton" @click="value = []">{{ $t('重置')
                }}</uv-button>
                <uv-button :custom-style="submitButton" @click="submit">{{ $t('确定')
                }}</uv-button>
            </view>
        </view>
    </view>
    <uv-popup ref="popup" type="center" @change="(e: any) => pageshow = e.show" :safeAreaInsetBottom="false">
        <view class="popup-context">
            <view class="popup-context-header">
                <view class="select-item">
                    <view class="select-item-view ">
                        <view>
                            已选择：{{ value.length }}
                        </view>
                    </view>
                    <view>

                        <uv-button :custom-style="submitButton" @click="popup?.close">{{ $t('确定')
                        }}</uv-button>
                    </view>
                </view>
            </view>
            <scroll-view class="list" :scroll-y="true">
                <view class="popup-context-view" v-for="v in value" :key="v">
                    <uv-tags :text="columns.find(e => e.poiId == v)?.poiName" plain shape="circle" color="#FD754C"
                        bgColor="#FFF2EE" borderColor="#FD754C" closeColor="#cccccc" closable plainFill :show="true"
                        @close="click(v)"></uv-tags>
                </view>
            </scroll-view>
        </view>
    </uv-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import api from '@/api';
import { computed } from 'vue';
import { groupBy, without } from 'lodash-es'
import { watch } from 'vue';
import { submitButton, defaultButton } from '@/util/style';
import { onShow } from '@dcloudio/uni-app';
submitButton
const p = withDefaults(defineProps<{ modelValue: string[], }>(), {
    modelValue: () => []
})
const emit = defineEmits(['update:modelValue', 'close'])
const indexList = computed(() => {
    return [' ']
})
const popup = ref()
const pageshow = ref(false)

const keyword = ref()
const columns = ref<Eps.BaseUserShopEntity[]>([])

const groupcolumns = ref<Record<string, Eps.BaseUserShopEntity[]>>({})

// const groupcolumnskey = computed(() => {
//     return keys(groupcolumns.value)
// })



const value = ref<string[]>([])

const customNavHeight = ref(0)


onShow(() => {
    start()
})

function click(e?: string) {
    const n = value.value.findIndex(c => c === String(e))
    if (n > -1) {
        value.value = without(value.value, String(e))
    } else {
        value.value = value.value.concat(String(e))
    }
}


watch(() => keyword.value, e => {
    if (keyword.value) {
        const data = columns.value.filter(t => t.poiName?.includes(e))
        groupcolumns.value = groupBy(data, 'city')
    } else {
        groupcolumns.value = groupBy(columns.value, 'city')
    }
})

function start() {
    api<Eps.BaseUserShopEntity[]>('/wechat/shop/list').then(e => {
        columns.value = e
        groupcolumns.value = groupBy(e, 'city')
    }).catch(f => {
        uni.showToast({
            icon: 'error',
            title: f,
            duration: 2000
        });
    })
}


function submit() {
    emit('update:modelValue', value.value)
    emit('close')
}


defineExpose({
    columns: columns
})



</script>

<style scoped lang="scss">
.storecheck {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    height: 90vh;
}

.list-select-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    min-height: 76rpx;
}

.list-cell {
    padding: 10px 24rpx;
    overflow: hidden;
    color: $uni-text-color;
    font-size: 14px;
    line-height: 24px;
    background-color: $uni-text-color-inverse;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .viewicon {
        width: 40rpx;
        display: inline-block;
    }

    .text {
        display: inline-block;
    }

}

.list-select {
    display: flex;
    flex-direction: column;
    padding-left: 32rpx;
    padding-right: 32rpx;
    gap: 12rpx;
    font-size: 24rpx;

}

.list-city {
    background-color: rgba(247, 247, 247, 1);
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    height: 34rpx;
    padding-top: 6rpx;
    padding-bottom: 6rpx;

}

.uv-index-list {
    flex: 1;
    overflow: hidden;
}

.list-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    padding: 12rpx;
    align-items: center;
    justify-content: center;

    .select-item-view {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex: 1;

    }



    .list-footer-btn {
        flex: 1;
        display: flex;
        justify-content: flex-end;

    }
}


.active {
    color: #FD754C;
}

.uv-index-list-footer {
    margin-bottom: 150px;
}

.select-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1rpx solid $uni-border-color;


    .select-item-view {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex: 1;

    }

    .select-item-button {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
    }
}

.popup-context {
    width: 100vw;
    display: flex;
    gap: 12rpx;
    flex-direction: column;
    height: 400px;

    .popup-context-header {
        height: 130rpx;
    }

    .list {
        height: 300px;
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;

        .popup-context-view {
            height: 84rpx;
            padding: 12rpx;
            display: inline-flex;
        }
    }


}
</style>
